<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<title>PlaneSpotter</title>

	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	
	<link type="text/css" rel="stylesheet" href="<c:url value="/resources/main.css" />">
	<link type="text/css" rel="stylesheet" href="<c:url value="/resources/cloud-zoom.css" />">
	
	<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="<c:url value="/resources/cloud-zoom.1.0.2.js" />"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
		});
	</script>
	
</head>
<body>
	<c:if test="${not empty files}">
		<div class="box">
            <c:forEach items="${files}" var="file">
            	<table style="border: 1px solid gray; width: 100%">
            		<tr style="background-color: #f5cc8e;">
            			<td>Photo</td>
            			<td>Information</td>
            			<td>Aircraft and Airport</td>
            		</tr>
            		<tr>
            			<td width="20%">
		            		<a href="<c:url value='/photo/display/${file.id}' />">
		            			<img src="<c:url value='/photo/thumbnail/${file.id}'></c:url>" border="0"/>
		            		</a>
		            	</td>
            			<td valign="top" width="30%">
            				<b>Views</b>: ${file.views}
            				<br/><b>Date Taken</b>: <fmt:formatDate type="both" pattern="dd MMM yyyy" value="${file.dateTaken}" />
            				<br/><b>Date uploaded</b>: <fmt:formatDate type="both" pattern="dd MMM yyyy" value="${file.dateUploaded}" />
            				<br/><b>Uploaded by</b>: ${file.registeredUser.firstName} ${file.registeredUser.lastName}
            				<br/><b>Comments</b>: ${file.comment}
            			</td>
            			<td valign="top" width="45%">
           					<b>Mark</b>: ${file.aircraft.mark }
           					<br/><b>Operator's Name</b>: ${file.aircraft.operatorName }
            				<br/><b>Manufacturer</b>: ${file.aircraft.manufacturer }
            				<br/><b>Model</b>: ${file.aircraft.model }
            				<br/><b>Serial Number</b>: ${file.aircraft.serialNumber }
            				<br/>
            				<br/><b>Airport</b>: ${file.airport.name} (${file.airport.city}, ${file.airport.country})
            			</td>
            		</tr>
            	</table>
            	<br/>
            </c:forEach>
		</div>
	</c:if>

</body>
</html>
